<template>
  <div class="content">
    <div>
      <el-table
        ref="mutable"
        border
        style="width: 98%; font-size: 14px; margin-left: 20px"
        :height="tableHeight"
        :data="filteredData"
        v-loading="loading"
        :header-cell-style="{
          'text-align': 'left',
          color: '#000',
          'border-color': '#ccffff',
          background: '#CCFFFF',
        }"
        :cell-style="{
          'text-align': 'left',
          'border-color': '#fff',
          height: '120',
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" width="80">
          <template scope="scope">
            <span v-if="scope.$index + 1 < 10">00{{ scope.$index + 1 }}</span>
            <span v-if="scope.$index + 1 > 9 && scope.$index + 1 < 100"
              >0{{ scope.$index + 1 }}</span
            >
            <span v-if="scope.$index + 1 > 99">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dev_id">
          <template slot="header">
            MAC
            <!-- 点击搜索框1 -->
            <el-popover placement="bottom" trigger="click">
              <MACinput @filtermac="filtermacTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="设备类型" prop="dev_type_name">
          <template slot="header">
            设备类型
            <!-- 点击搜索框2 -->
            <el-popover placement="bottom" trigger="click">
              <FacilityTypeinput @filter="filterTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="设备描述">
          <template slot="header">
            设备名称
            <!-- 点击搜索框3 -->
            <el-popover placement="bottom" trigger="click">
              <FacilityNameinput />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <span>
              {{ scope.row.btn_func_name || "--" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="图位编号" prop="gw_id">
          <template slot="header">
            图位编号
            <!-- 点击搜索框4 -->
            <el-popover placement="bottom" trigger="click">
              <MapNumberinput />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>
        <!-- 复选框 -->
        <el-table-column
          v-model="haspage"
          type="selection"
          width="50"
          align="center"
        >
        </el-table-column>
      </el-table>
      <div class="footer">
        <el-button type="info" @click="hideDialog('dialog', 'visible')"
          >取 消</el-button
        >
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import { count } from "console";
import Api from "../api/api";
import MACinput from "@/components/cominput/MACinput.vue";
import FacilityTypeinput from "@/components/cominput/FacilityTypeinput.vue";
import FacilityNameinput from "@/components/cominput/FacilityNameinput.vue";
import MapNumberinput from "@/components/cominput/MapNumberinput.vue";

export default {
  components: {
    MACinput,
    FacilityTypeinput,
    FacilityNameinput,
    MapNumberinput,
  },
  props: {
    propName: Array,
    message: Array,
    message1: Object,
    fatherPage: Array,
  },
  inject: ["reload"],
  data() {
    return {
      list: [],
      newDev: [],
      haspage: [],
      filteredData: [],
      currentGroup: {},
      // localSid: localStorage.getItem("sid"),
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      state: "",
      show: true,
      count: null,
      options: "",
      name: "",
      loading: true,
      dialog: {
        visible: false,
      },
      selection: [],
      tableHeight: window.innerHeight - 150,
    };
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(
      "父传子的表格数据源》》",
      this.message,
      this.fatherPage,
      this.message1
    );
    this.currentGroup = this.message1;
    // this.filteredData = JSON.parse(JSON.stringify(this.message));
    this.chageSelect();
  },
  async created() {
    this.filteredData = JSON.parse(JSON.stringify(this.message));
    // 获取空间卡片内容的接口
    // let ref = await Api.query_areas({ params: { sid: this.localSid } });
    // this.options = ref.result.areas;
    // console.log("ref上面的带名称>", this.options);
    // 获取在线数离线数的接口
    // let refs = await Api.get_all_device_count({
    //   params: { sid: this.localSid },
    // });
    // this.count = refs.result.count;
    // console.log("count>", this.count);

    //带有mac列数据的接口
    let res2 = await Api.exc({
      params: { sid: this.localSid },
    });
    res2.result.device_ep_list.forEach((el) => {
      this.$set(el, "settingMode", false);
      this.$set(el, "openLevelIsClose", false);
      this.$set(el, "brightnessIsClose", false);
      this.$set(el, "openLevelIsOpen", false);
      this.$set(el, "brightnessIsOpen", false);
      this.$set(el, "popVisible", false);
      this.$set(el, "isHighLight", false);
      this.$set(el, "timer", null);
      if (el.rgb) {
        this.$set(el, "colors", "#" + el.rgb);
      }
      if (el.target_temp) {
        el.target_temp = el.target_temp / 10;
      }
    });
    console.log("进来了res2>", res2);
    function compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    }
    res2.result.device_ep_list.sort(compare("online"));
    this.list = res2.result.device_ep_list;
    this.loading = false;
  },
  methods: {
    filtermacTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.message));
        this.chageSelect(this.filteredData);
      } else {
        this.filteredData = this.message.filter((row) => {
          this.chageSelect();
          return row.dev_id.includes(keywords);
        });
      }
    },
    filterTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.message));
      } else {
        this.filteredData = this.message.filter((row) => {
          return row.dev_type_name.includes(keywords);
        });
      }
    },
    // 多选
    chageSelect() {
      // fatherPage 选择的表
      this.fatherPage.forEach((item) => {
        // message 总表
        this.filteredData.forEach((i) => {
          // item.dev_id == i.dev_id  相等的进行判断是否勾选
          if (item.dev_id == i.dev_id && i.ep_id == item.ep) {
            this.$refs.mutable.toggleRowSelection(i, true);
          }
        });
      });
    },
    handleSelectionChange(e) {
      this.newDev = e;
      console.log("复选框勾选的内容", e);
      // this.selection = e;
    },
    querySearch(queryString, cb) {
      var restaurants = this.list;
      console.log("this.list>>", this.list);
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },

    back() {
      this.$emit("back");
    },
    // 删除
    // del(id) {
    //   console.log(id);
    //   this.list = this.list.filter((item) => item.ep_id != id);
    // },
    // 添加
    async submit() {
      const loading = this.$loading({
        lock: true,
        text: "加载中,请稍等片刻. . .",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.newDev.forEach((el) => {
        el.ep = el.ep_id;
      });
      console.log("复选框准备返回的数据", this.newDev);
      this.currentGroup.group_devices = this.newDev;

      await Api.update_groups_detail({
        params: {
          sid: this.localSid,
          group_list: [this.currentGroup],
        },
      });
      this.$emit("back");
      this.$message({
        showClose: true,
        type: "success",
        message: "添加成功",
      });

      this.dialog.visible = false;
      this.addequipment = !this.addequipment;
      loading.close();
      this.reload();
    },
    hideDialog(dialog, visible) {
      this.$emit("back");
      this[dialog][visible] = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 80px);
  // 去除滚动条

  ::v-deep .el-table th.gutter {
    display: none;
    width: 0;
  }
  ::v-deep .el-table colgroup col[name="gutter"] {
    display: none;
    width: 0;
  }
  ::v-deep .el-table__body {
    width: 100% !important;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .warning {
    color: #127cf5;
    cursor: pointer;
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .inputname {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }

  .contentpad {
    width: 100%;
    height: calc(100vh - 200px);

    ::v-deep .el-table {
      max-height: calc(100vh - 200px) !important;
    }
  }
  .footer {
    position: fixed;
    right: 3%;
    bottom: 2%;
  }
}
</style>
